<%@page import="org.proddevplm.dao.data.RelationMatrix"%>
<%@page import="java.util.*"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.product.constants.ProductConstants"%>
<script>
	
	$ (function() {
		$( "#productStartDatePicker" ).datepicker();
		$( "#productEndDatePicker" ).datepicker();
		$("input:submit").button();
	}); 

</script>

<script>

	$(document).ready(function() {
		$('.hidden').hide(); // hides the divs with class 'hidden'
		$('.pdetails').hide(); //hides the divs with class 'details'

		$('#productName').mouseover(function(){
			$('#productNameDetails').show();
		});
		
		$('#productName').mouseout(function(){
			$('#productNameDetails').hide();
		});

		$('#productDetails').mouseover(function(){
			$('#productDescription').show();
		});
		
		$('#productDetails').mouseout(function(){
			$('#productDescription').hide();
		});

		$('#teamLeader').mouseover(function(){
			$('#teamLeaderDetails').show();
		});
		
		$('#teamLeader').mouseout(function(){
			$('#teamLeaderDetails').hide();
		});

		$('#productStartDate').mouseover(function(){
			$('#productStartDateDetails').show();
		});
		
		$('#productStartDate').mouseout(function(){
			$('#productStartDateDetails').hide();
		});

		$('#productEndDate').mouseover(function(){
			$('#productEndDateDetails').show();
		});
		
		$('#productEndDate').mouseout(function(){
			$('#productEndDateDetails').hide();
		});
		

		
		
		$('.highlight').mouseover(function () {
			$(this).css("color","black");
		    $(this).css("cursor", "help");  
		 });

		$('.highlight').mouseout(function () {
			 $(this).css("color","#555555");
		 });
		

	})

</script>

<script type="text/javascript">

	function checkForm()
	{
		if (document.newProduct.productName.value=='')
		{
			alert('Please insert a name for your product');
			return false;
		}

		else if (document.newProduct.description.value=='')
		{
			alert('Please add a short description for your product');
			return false;
		}

		else if (document.newProduct.productStartDatePicker.value=='')
		{
			alert('Please select a start date for the product development project');
			return false;
		}
		else if (document.newProduct.productEndDatePicker.value=='')
		{
			alert('Please select the estimated end date for the product development project');
			return false;
		}
		else if (checkProductDates())
		{
			alert('The end date you entered is earlier than the start date of your product development project');
			return false;
		}
		
		function checkProductDates(){
			
			
			var check = false;
			
			var sd = document.newProduct.productStartDatePicker.value;
			var ed = document.newProduct.productEndDatePicker.value;
			
			var syear = sd.charAt(6)+sd.charAt(7)+sd.charAt(8)+sd.charAt(9);
			var smonth = sd.charAt(0)+sd.charAt(1);
			var sday = sd.charAt(3)+sd.charAt(4);
			
			var eyear = ed.charAt(6)+ed.charAt(7)+ed.charAt(8)+ed.charAt(9);
			var emonth = ed.charAt(0)+ed.charAt(1);
			var eday = ed.charAt(3)+ed.charAt(4);
			
			if (eyear<syear) check = true;
			else if (eyear==syear){
				if (emonth<smonth) check = true
				else if (emonth==smonth)
					if(eday<sday) check = true;				
			}
				
			return check;
		}
		
	}

</script>


<div class="containerBig" style= "font-family: verdana; font-size:small; width:auto; ">
	<form name="newProduct" method="post" action="/proddev/controller" onSubmit="return checkForm()">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.PRODUCT_MANAGER %>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=ProductConstants.ADD_PRODUCT%>"/>				
					
		<div >
			<div class="pageTitle" style="text-align:left; font-size:medium; height:20px; padding:1%;">
				<b>Define a new product for the current project</b>
				<div style="clear:both"></div>
			</div>
		</div>
		<div class="containerSmall" style="width:40%; margin:10 5 5; ">	
			<div style="margin-top:10px; ">
				<div id="productName" class="highlight" style="width: 200px; ">
					<b>Product name: </b>
				</div>
				<input class="regInput" type="text" name="productName" style="width: 100%; margin-top:5px;">
			</div> 
								
			<div style="margin-top:10px;">
				<div id="productDetails" class="highlight" style="width: 200px; float: left; ">
					<b>Product description: </b>
				</div>
				<textarea class="regInput" name="description" rows="3" style="width:100%; margin-top:5px"></textarea>
			</div> 						
								
			<div style="margin-top:10px;">
				<div id="teamLeader" class="highlight" style="width: 200px; float: left; ">
					<b>Team Leader: </b>
				</div>
				
				<select class="regInput" name="projectMembers" style="width: 100%; margin-top:5px; font-weight:bold; color:#555555" size="1">
					
					<%
					List<RelationMatrix> relMatrix = (List)session.getAttribute("relationMatrix");
					for (RelationMatrix r:relMatrix){%>
						<option value="<%= r.getUser().getSurname()%> <%=r.getUser().getName()%>" style="font-weight:bold; color:#555555"><%=r.getUser().getSurname()%> <%=r.getUser().getName()%></option>
					<%}
					%>
									 
				</select>					
			</div>
								
			<div style="margin-top:10px; width:50%; float:left">
				<div id="productStartDate" class="highlight" style="width:100%; ">
					<b>Start date: </b> 
				</div>
				<input class="regInput" style="width:50%; margin-top:5px;" type="text" id="productStartDatePicker" name="productStartDatePicker">
			</div>
						
			<div style="margin-top:10px; width:50%; text-align:right; float:right">
				<div id="productEndDate" class="highlight" style="width:100%; ">
					<b>End date:</b> 
				</div>
				<input class="regInput" style="width:50%; margin-top:5px;" type="text" id="productEndDatePicker" name="productEndDatePicker">																
			</div>	
			<div style="clear:both"></div>			
			
			<div align="center">
				<input type="submit" value="Save product" style="width:30%; margin-top:5px; float:center; font-weight: bold;">
			</div>
			<div style="clear:both;"></div>
		</div>						
	</form>
</div>		
<div id="productNameDetails" class="pdetails">Please set a <b>name</b>
	for your product. The name of the product can contain alfa-numeric characters.
</div>
			
<div id="productDescription" class="pdetails">
	In this section, please add a short <b>description</b> of the product.
</div>
			
<div id="teamLeaderDetails" class="pdetails">
	Please select the <b>team leader</b> from the <b>dropdown menu</b> on the right.
</div>
	
<div id="productStartDateDetails" class="pdetails">Set the <b>start date</b>
	for the product's activities. Click in the predefined area and select the appropriate
	start date from the calendar.
</div>

<div id="productEndDateDetails" class="pdetails">Set the <b>end date</b>
	for the product's activities. Click in the predefined area and select the appropriate
	end date from the calendar. Please select the end date so that it is
	later than the start date of the first activity of the project.
</div>
